<template>
    <section>
        <!--工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true">
                <el-form-item>
                    <el-button type="primary" @click="$refs.createTask.show()" :icon="EditPen" > 新增</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <!--列表-->
        <el-table :data="taskList" highlight-current-row v-loading="listLoading" @selection-change="onSelsChanged" style="width: 100%;">
            <el-table-column type="expand" width="25">
                <template #default="{row, $index}">
                    <el-form label-position="left" inline class="table-expand">
                        <el-form-item label="ID：">
                            <span>{{row.id}}</span>
                        </el-form-item>
                        <el-form-item label="任务名称：">
                            <span>{{row.taskname}}</span>
                        </el-form-item>
                        <el-form-item label="任务描述：">
                            <span>{{row.taskdesc}}</span>
                        </el-form-item>
                        <el-form-item label="截止时间：">
                            <span>{{row.endtime}}</span>
                        </el-form-item>
                        <el-form-item label="状态：">
                            <span>{{row.status}}</span>
                        </el-form-item>

                    </el-form>
                </template>
            </el-table-column>
            <el-table-column type="selection" width="30" />
            <el-table-column prop="id" label="ID" width="80" sortable />
            <el-table-column prop="taskname" label="任务名称" width="150" :show-overflow-tooltip="true" />
            <el-table-column prop="endtime" label="截止时间" width="150" :show-overflow-tooltip="true" />
            <el-table-column prop="status" label="状态" width="150" :show-overflow-tooltip="true" />
            <el-table-column label="操作" width="180">
                <template #default="{row, $index}">
                    <el-tooltip content="编辑" placement="top">
                        <el-button text circle :icon="EditPen" @click="$refs.editTask.show($index, row)"  />
                    </el-tooltip>
                    <el-tooltip content="更多" placement="top">
                        <el-dropdown trigger="click">
                            <el-button text circle :icon="MoreFilled" />
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <div @click="handleDel($index, row)">
                                        <el-dropdown-item divided>
                                            <el-tooltip content="删除" placement="top">
                                                <el-button text circle :icon="Delete"> 删除</el-button>
                                            </el-tooltip>
                                        </el-dropdown-item>
                                    </div>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </el-tooltip>

                </template>
            </el-table-column>
            <el-table-column label="" />
        </el-table>



        <!--新增界面-->
        <create-role ref="createTask" v-on:success="getTaskList"/>

        <!--编辑界面-->
        <edit-role ref="editTask" v-on:success="getTaskList"/>


    </section>
</template>

<script setup>
import CreateRole from './task/CreateTask.vue';
import EditRole from './task/EditTask.vue';
import {Delete, EditPen, Search, MoreFilled, Wallet} from '@element-plus/icons-vue';

const {proxy} = getCurrentInstance();
const filters = ref({
    keywords: null
});
const total = ref(0);
const taskList  = ref([]);
const pageNo = ref(1);
const pageSize = ref(10);
const listLoading = ref(false);
const sels = ref([]);

function formatUpdater(row, column) {
    return row.updater || row.creator;
}
function formatUpdateTime(row, column) {
    return proxy.$date.formatDate(row.updateTime || row.createTime, 'yyyy-MM-dd HH:mm:ss');
}
function onSelsChanged(v) {
    sels.value = v;
}
function handleSizeChange(psize) {
    getTaskList(1, psize);
}
function handleCurrentChange(pno) {
    getTaskList(pno, null);
}
function getTaskList(pno, psize) {
    if (pno != null) {
        pageNo.value = pno;
    }
    if (psize != null) {
        pageSize.value = psize;
    }

    listLoading.value = true;
    proxy.request.get('/tasks').then((res) => {
        taskList.value = res.data.data;
        listLoading.value = false;
    }).catch((err) => {
        total.value = 0;
        taskList.value = [];
        listLoading.value = false;
    });
}
function handleDel(index, row) {
    sels.value = [];
    sels.value.push(row);
    batchRemove();
}
function batchRemove() {
    var ids = sels.value.map(item => item.id).toString();
    proxy.$modal.confirm('确定删除选中记录吗?', '提示', {type: 'warning'}).then(function() {
        listLoading.value = true;
        proxy.request.delete('/tasks/'+ids).then((res) => {
            proxy.$modal.msgSuccess(res.data.msg);
            listLoading.value = false;
            getTaskList();
        }).catch((err) => {
            listLoading.value = false;
        });
    }).catch((err) => {});
    sels.value = [];
}
getTaskList();
</script>

<style scoped>

</style>

